<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聚造-登录</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        .active{
            border: red solid 1px;
        }
    </style>
</head>

<body>
    <div id="App">
        <div v-on:click="click">点击:{{a}}</div>
        <button @click="sub"> - </button>
        <span>{{ num }}</span>
        <button @click="add"> + </button>
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isshow">你好 vue</p>
        <img v-bind:src="imgSrc" alt="">
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''">
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class={active:isActive}>
        <ul>
            <li v-for="(item,index) in arr">{{ index+1 }}校区：{{ item }}</li>
        </ul>
        <input type="button" value="加菜" @click="addvegetable">
        <input type="button" value="减菜" @click="removevegetable">
        <h2 v-for="item in vegetable" :title="item.name">
            {{item.name}}
        </h2>
</body>
<script>
    var vm = new Vue({
        el: '#App',
        data: {
            a: 1,
            num:1,
            isshow:false,
            imgSrc:"https://www.itheima.com/images/logo.png",
            imgTitle:"黑马程序员",
            isActive:true,
            arr:['北京','上海','广州','深圳'],
            vegetable:[
                {name:"西红柿炒蛋"},
                {name:"蛋炒西红柿"}
            ]
        },
        watch:{
            a:function (newValue, oldValue) {
                console.log('值的变化',newValue,oldValue)
                 // 这个回调将在 `vm.a` 改变后调用
            }
        },
        methods: {
            click() {
                this.a = this.a + 1
                console.log(this.a, vm.a)
            },
            add(){
                if(this.num<10){
                    this.num++
                }else{
                    alert("别点啦，已经最大了")
                }

            },
            sub(){
                if(this.num>0){
                    this.num--
                }else{
                    alert("别点啦，已经最小了")
                }
            },
            toggleIsShow(){
                this.isshow = !this.isshow
            },
            addvegetable(){
                this.vegetable.push({name:"韭菜炒蛋"})
            },
            removevegetable(){
                this.vegetable.shift()
            }
        },
        created(){//onLoad
            console.log('数据已经准备好了')
        },
        mounted(){//onReady
            console.log('html元素渲染完成')
        }
    })
</script>

</html>